<script setup>
import { ref } from "vue";
import RentTop from "@/pages/index/components/RentTop.vue";
import RentSwiper from "@/pages/index/components/RentSwiper.vue";
import RentMiddle from "@/pages/index/components/RentMiddle.vue";
import { houseGetListService } from "@/api/house";
import { onLoad } from "@dcloudio/uni-app";
import { useMemberStore } from "@/stores";
const memberStore = useMemberStore();

// 房屋列表
const houseList = ref([]);
// 下拉刷新状态
const isTriggered = ref(false);
// 下拉到底结束标记
const finish = ref(false);
// 定义搜索条件
const searchConditions = ref({
  page: 1,
  pageSize: 4,
  address: "",
  name: "",
});

// 过滤掉空字符串的函数
const filterEmptyValues = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).filter(
      ([key, value]) => value !== "" && value !== "全部城市"
    )
  );
};

// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true;
  await getHouseList();
  isTriggered.value = false;
};

// 滚动到底重新发送请求
const onScrolltolower = async () => {
  await getHouseBottom();
};

// 获取猜你喜欢数据
const getHouseBottom = async () => {
  // 退出分页判断
  if (finish.value === true) {
    return uni.showToast({ icon: "none", title: "没有更多数据~" });
  }
  searchConditions.value.page++;
  const filteredConditions = filterEmptyValues(searchConditions.value);
  const res = await houseGetListService(filteredConditions);
  //分页条件
  if (searchConditions.value.page > res.data.pageTotal) {
    finish.value = true;
    return;
  }
  // 数组追加
  houseList.value.push(...res.data.records);
};
// 重置数据
const resetData = () => {
  searchConditions.value.page = 1;
  houseList.value = [];
  finish.value = false;
};

// 获取房源信息
const getHouseList = async () => {
  const filteredConditions = filterEmptyValues(searchConditions.value);
  const res = await houseGetListService(filteredConditions);
  houseList.value = res.data.records;
};

// 处理城市选择
const handleCitySelected = async (city) => {
  await resetData();
  searchConditions.value.address = city;
  await getHouseList();
};

// 处理搜索查询
const handleSearchQuery = async (query) => {
  await resetData();
  searchConditions.value.name = query;
  await getHouseList();
};

onLoad(async () => {
  await getHouseList();
});
</script>

<template>
  <!-- 顶部 -->
  <RentTop
    @city-selected="handleCitySelected"
    @search-query="handleSearchQuery"
  />
  <scroll-view
    @scrolltolower="onScrolltolower"
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
    class="scroll-view"
    scroll-y
  >
    <!-- 轮播图 -->
    <RentSwiper />
    <!-- 中部选项栏 -->
    <RentMiddle />

    <!-- 房源信息 -->
    <view class="rent-house">
      <navigator
        :url="
          memberStore.profile
            ? `/pages/house/house?house=${house.id}`
            : `/pages/login/login`
        "
        class="rent-item"
        v-for="house in houseList"
        :key="house.id"
      >
        <image class="rent-image" :src="house.image" mode="aspectFill"></image>
        <view class="rent-info">
          <text class="rent-title">{{ house.specification }}</text>
          <view class="rent-name-price">
            <text class="rent-name">{{ house.name }}</text>
            <text class="rent-price">￥{{ house.price }}</text>
          </view>
          <text class="rent-desc">{{ house.address }}</text>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.scroll-view {
  height: calc(100vh - 80px);
}

.rent-house {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 允许换行 */
  margin: 4px;
  justify-content: space-between;
}

.rent-item {
  display: flex;
  flex-direction: column;
  width: calc(50% - 4px); /* 减去间距 */
  height: 180px;
  border: 2px solid #ffffff;
  border-radius: 8px;
  background-color: #ffffff;
  margin-bottom: 4px;

  .rent-image {
    width: 100%;
    height: 70%;
    border: 2px solid #ffffff;
  }

  .rent-info {
    display: flex;
    flex-direction: column;

    .rent-title {
      font-size: 14px;
      color: black;
    }

    .rent-name-price {
      display: flex;
      align-items: center; /* 垂直居中对齐 */

      .rent-name {
        font-size: 14px;
        color: black; /* 设置字体颜色为黑色 */
        margin-right: 8px; /* 可选：增加间距 */
      }

      .rent-price {
        font-size: 16px;
        color: #efa654;
      }
    }

    .rent-desc {
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>
